{% load staticfiles %}
<link rel="stylesheet" href="{% static 'plugins/imagecrop/imagecrop.css' %}">
<div class="container" style="margin-left:10px">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none"></div>
    </div>
    <div class="action">
        <!-- <input type="file" id="file" style=" width: 200px">-->
        <div class="new-contentarea tc"><a href="javascript:void(0)" class="upload-img">
            <label for="upload-file">请先选择图片...</label>
        </a>
            <input type="file" class="" name="upload-file" id="upload-file"/>
        </div>
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="OK">
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
        <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
    </div>
    <div class="cropped"></div>
</div>

<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'plugins/imagecrop/layer.js' %}"></script>
<script type="text/javascript" src="{% static 'plugins/imagecrop/cropbox-min.js' %}"></script>
<script type="text/javascript" src="{% static 'plugins/imagecrop/csrf.js' %}"></script>
<script type="text/javascript">

    $(window).load(function () {
        var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: ''
            }
        var cropper = $('.imageBox').cropbox(options);
        var img = "";
        var img1 = ""
        $('#upload-file').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                console.log(options);
                options.imgSrc = e.target.result;
                img1 = options.imgSrc;
                cropper = $('.imageBox').cropbox(options);
                getImg();
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
            //getImg();
        })
        $('#btnCrop').on('click', function () {
            console.log(img1);
            $.ajax({
                url: '{% url "backend:my_image" %}',
                type: 'POST',
                data: {"img": img1},
                success: function (e) {
                    if (e == "1") {
                        alert("成功");
                        parent.location.reload();
                    } else {
                        alert("sorry, you are not lucky. the picutre can't been uploaded.");
                    }

                },
            });

        })

        function getImg() {
            img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
        }

        $(".imageBox").on("mouseup", function () {
            getImg();
        });

        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        })
    });
</script>

